<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同源策略</title>
</head>
<body>
    /*
    1.同源策略
        它是由 Netscape(网景公司) 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
        浏览器最大的安全策略。
        同协议 同域名 同端口号 =》同源 允许js直接访问数据  https（安全）=http+ssl证书（买）
        URL地址构成：协议+域名+端口号+路径+参数
        A===>B
        A:http://v.juhe.cn:80
        B:https://v.juhe.cn:80

        出现违背同源策略的现象就会发生跨域问题，但是注意跨域不代表数据请求失败，是浏览器的为了保护用户安全采取的一种
        自动拦截机制

    2.解决方案
        2.1jsonp  2.2前端代理proxy  2.3后端允许跨域请求（cors共享）  跨域资源文件共享
    3.jsonp
        jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
        jsonp跨域原理：
        www.baidu.com (jsonp)
        在HTML中有些标签的src属性|href属性 获取远程资源的时候是不受同源策略影响的，比如script 、img、a等
        动态创建script标签利用其src不受跨域影响的优势，获取跨域数据，
        使用jquery更加方便
        jQuery ajax方式以jsonp类型发起跨域请求，其原理跟&lt;script&gt;>脚本请求一样，
        因此使用jsonp时也只能使用GET方式发起跨域请求。跨域请求需要服务端配合，设置callback，才能完成跨域请求。
*/


<script src="./jquery.js"></script>
<script>
    // http://suggestion.baidu.com/su?cb=getwd&wd=123
    /*
            params:
                cb:传递给服务端用来给前端页面返回数据的触发函数名称
                wd:搜索关键词
    */
    // 直接请求
    // $.ajax({
    //     url:"http://suggestion.baidu.com/su?cb=getwd&wd=123",
    //     success:res=> console.log(res),
    //     fail: err=> console.log(err)  
    // })


    // 跨域请求  jqery种的jsonp跨域请求数据
    $.ajax({
        url:"http://suggestion.baidu.com/su?wd=123",

        dataType:"jsonp",
        jsonpCallback:"show",
        jsonp:"cb",
        
        success:res=> console.log(res),
        fail: err=> console.log(err)  
    })

    function show(res) {
        console.log('百度结果是：', res)
    }


</script>
</body>
</html>